<template>
  <div class="container">
    <h5 class="parent">{{ form.addrName }}</h5>

    <el-card class="info-card">
      <div class="card-item">
        <div class="label">地址名称</div>
        <div class="value">{{ form.addrName }}</div>
      </div>
      <div class="card-item">
        <div class="label">单位名称</div>
        <div class="value">{{ form.clientName }}</div>
      </div>
      <div class="card-item">
        <div class="label">地址</div>
        <div class="value">{{ form.address }}</div>
      </div>
      <div class="card-item">
        <div class="label">巡检次数</div>
        <div class="value">{{ form.inspectCount }}</div>
      </div>
      <div class="card-item">
        <div class="label">维保次数</div>
        <div class="value">{{ form.maintenanceCount }}</div>
      </div>
    </el-card>

    <h5 class="parent">最近一次巡检数据</h5>

    <el-card class="info-card">
      <div class="card-item">
        <div class="label">巡检人员</div>
        <div class="value">{{ form.inspectUserName }}</div>
      </div>
      <div class="card-item">
        <div class="label">巡检电话</div>
        <a class="telValue" :href="'tel:' + form.inspectTelephone" rel="external nofollow">{{ form.inspectTelephone }}</a>
      </div>
      <div class="card-item">
        <div class="label">巡检时间</div>
        <div class="value">{{ form.inspectDateTime }}</div>
      </div>
      <div class="card-item">
        <div class="label">巡检信息</div>
        <div class="value">{{ form.inspectInformation }}</div>
      </div>
    </el-card>

    <h5 class="parent">最近一次维保数据</h5>

    <el-card class="info-card">
      <div class="card-item">
        <div class="label">维保人员</div>
        <div class="value">{{ form.maintenanceUserName }}</div>
      </div>
      <div class="card-item">
        <div class="label">维保电话</div>
        <a class="telValue" :href="'tel:' + form.maintenanceTelephone" rel="external nofollow">{{ form.maintenanceTelephone }}</a>
      </div>
      <div class="card-item">
        <div class="label">维保时间</div>
        <div class="value">{{ form.maintenanceDateTime }}</div>
      </div>
      <div class="card-item">
        <div class="label">维保信息</div>
        <div class="value">{{ form.maintenanceInformation }}</div>
      </div>
    </el-card>

    <h5 class="parent more-data" @click="toDescriptions(this.id)">更多数据</h5>
  </div>
</template>

<script>
import request from "@/utils/request.js";

export default {
  name: "AddrCode",
  data() {
    return {
      id: this.$route.query.id,
      form: {}
    };
  },
  mounted() {
    this.load();
  },
  methods: {
    load() {
      request.get("/inspect-addr-code/newAddrData?id=" + this.id).then(res => {
        if (res.code === '200') {
          this.form = res.data;
        } else {
          this.$message.error("错误" + res.msg);
        }
      });
    },
    isLogin(){
      if (localStorage.getItem("user")){
        return true
      }
      return false
    },
    toDescriptions(id) {
      if (!this.isLogin()) {
        localStorage.setItem("redirectPath",this.$route.fullPath)
        this.$router.push('/login')
      }

        this.$router.push({path: "/addrCodeAbout", query: {id: id}});
        // if (!localStorage.getItem('user') && (to.path !== "/login")) {
        //     // 重定向到登录页面
        //     next('/login')
        // }
    }
  }
};
</script>

<style scoped>
.container {
  background: #eeeff3;
  padding: 10px 15px;
  font-size: 14px;
}

.parent {
  text-align: center;
  font-size: 18px;
  color: #333;
  margin: 15px 0;
}

.more-data {
  color: #1890ff;
  cursor: pointer;
}

.info-card {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.card-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid #ddd;
}

.card-item:last-child {
  border-bottom: none;
}

.label {
  font-size: 14px;
  color: #666;
}

.value {
  font-size: 14px;
  color: #333;
}

.telValue {
  font-size: 14px;
  color: #478CF6;
}

/* Responsive design */
@media (max-width: 600px) {
  .container {
    padding: 15px;
  }

  .parent {
    font-size: 16px;
  }

  .card-item {
    font-size: 12px;
  }

  .more-data {
    font-size: 14px;
  }
}
</style>
